<script setup lang="ts">
import {
  Viewer,
  UrlTemplateImageryProvider,
  ImageryLayer,
  Math,
  Cartesian3,
  GeoJsonDataSource,
  Color,
  ColorMaterialProperty,
  SampledProperty,
  ConstantProperty,
} from 'cesium'
import 'cesium/Build/Cesium/Widgets/widgets.css'
import { onMounted, ref } from 'vue'
;(window as any).CESIUM_BASE_URL = '/cesium'
const contentRef = ref<HTMLDivElement>()

onMounted(async () => {
  const viewer = new Viewer(contentRef.value!, {
    infoBox: false,
    /** 搜索框 */
    geocoder: false,
    /** home按钮 */
    homeButton: false,
    // 动画控件
    animation: false,
    // 全屏按钮
    fullscreenButton: false,
    // 场景模式选择器
    sceneModePicker: false,
    // 时间轴
    timeline: false,
    // 导航提示
    navigationHelpButton: false,
    // 地图选择器
    baseLayerPicker: false,
  })

  const layer = new ImageryLayer(
    new UrlTemplateImageryProvider({
      url: 'http://webst01.is.autonavi.com/appmaptile?style=8&x={x}&y={y}&z={z}',
      minimumLevel: 1,
      maximumLevel: 18,
    }),
    {}
  )

  viewer.imageryLayers.add(layer)

  viewer.camera.setView({
    destination: Cartesian3.fromDegrees(116.398115, 39.907913, 9950000),
    orientation: {
      /** 相机朝向 */
      heading: Math.toRadians(0),
      /** 相机俯视角 */
      pitch: Math.toRadians(-90),
      /** 相机翻滚角 */
      roll: 0,
    },
  })

  const geoSource = await GeoJsonDataSource.load('https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json', {
    fill: Color.SKYBLUE.withAlpha(0.6),
    stroke: Color.RED.withAlpha(0.3),
    strokeWidth: 10000,
  })
  console.log(geoSource.entities.values)
  let areaMap = Object.create(null)
  geoSource.entities.values.forEach((item) => {
    if (!areaMap[item.name || 'unknown']) {
      areaMap[item.name || 'unknown'] = Color.fromRandom({ alpha: 0.7 })
    }
    if (item.polygon) {
      item.polygon.material = new ColorMaterialProperty(areaMap[item.name || 'unknown'])
      item.polygon.extrudedHeight = new ConstantProperty(100000)
    }
  })
  viewer.dataSources.add(geoSource)
})
</script>

<template>
  <div class="cesium-test" ref="contentRef"></div>
</template>

<style lang="scss" scoped>
.cesium-test {
  height: 100%;
  width: 100%;
}
</style>
